<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>公告管理</title>
    <script type="text/javascript" src="/js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="/js/vue.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="myApp">

    <!-- 查询表单 -->
    <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="公告标题">
            <el-input placeholder="公告标题" v-model="query.noticeTitle"></el-input>
        </el-form-item>
        <el-form-item label="创建人">
            <el-input placeholder="创建人" v-model="query.noticeCreator"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="queryData" icon="el-icon-search">查询</el-button>
            <el-button type="primary" @click="addPage" icon="el-icon-plus" v-if="role==1">新增</el-button>
            <el-button type="primary" @click="sortByTimeDesc" icon="el-icon-sort">按时间倒序</el-button>
        </el-form-item>
    </el-form>

    <!-- 公告列表 -->
    <el-table :data="list" style="width: 100%">
        <el-table-column label="公告ID" prop="noticeId"></el-table-column>
        <el-table-column label="公告标题" prop="noticeTitle"></el-table-column>
        <el-table-column label="公告内容" prop="noticeContent"></el-table-column>
        <el-table-column label="发布时间" prop="noticeCreatetime"></el-table-column>
        <el-table-column label="发布人" prop="noticeCreator"></el-table-column>
        <el-table-column label="操作" v-if="role==1">
            <template slot-scope="x">
                <el-button type="primary" icon="el-icon-edit" circle @click="updatePage(x.row)"></el-button>
                <el-button type="danger" icon="el-icon-delete" circle @click="del(x.row)"></el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.page"
            :page-sizes="[3, 5, 7, 10]"
            :page-size="query.row"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <!-- 新增公告对话框 -->
    <el-dialog title="新增公告" :visible.sync="addShow" width="30%">
        <el-form ref="form" label-width="80px">
            <el-form-item label="公告标题">
                <el-input v-model="parameter.noticeTitle"></el-input>
            </el-form-item>
            <el-form-item label="公告内容">
                <el-input type="textarea" v-model="parameter.noticeContent"></el-input>
            </el-form-item>
            <el-form-item label="创建时间">
                <!-- 日期选择器 -->
                <el-date-picker
                        v-model="parameter.noticeCreatetime"
                        type="datetime"
                        placeholder="选择日期和时间"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        :default-time="new Date()">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="add">新增</el-button>
                <el-button @click="addShow = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!-- 修改公告对话框 -->
    <el-dialog title="修改公告" :visible.sync="updateShow" width="30%">
        <el-form ref="form" label-width="80px">
            <el-form-item label="公告ID">
                <el-input v-model="parameterUpdate.noticeId" disabled></el-input>
            </el-form-item>
            <el-form-item label="公告标题">
                <el-input v-model="parameterUpdate.noticeTitle"></el-input>
            </el-form-item>
            <el-form-item label="公告内容">
                <el-input type="textarea" v-model="parameterUpdate.noticeContent"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="update">修改</el-button>
                <el-button @click="updateShow = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>

<script>
    // 创建 Vue 实例
    new Vue({
        el: "#myApp",
        data: {
            parameter: { // 新增公告参数
                noticeTitle: "",
                noticeContent: "",
                noticeCreator: "", // 添加创建人
                noticeCreatetime: "" // 添加创建时间
            },
            parameterUpdate: { // 修改公告参数
                noticeId: "",
                noticeTitle: "",
                noticeContent: ""
            },
            query: { // 查询条件
                noticeTitle: "",
                noticeCreator: "",
                page: 1,
                row: 3
            },
            total: 0, // 总条数
            list: [], // 公告列表
            addShow: false, // 新增对话框显示状态
            updateShow: false, // 修改对话框显示状态
            role: "" // 用户角色
        },
        methods: {
            // 按时间倒序排列
            sortByTimeDesc() {
                if (this.list.length > 0) {
                    this.list.sort((a, b) => {
                        const dateA = new Date(a.noticeCreatetime);
                        const dateB = new Date(b.noticeCreatetime);
                        return dateB - dateA; // 倒序排列
                    });
                }
            },
            // 分页大小变化
            handleSizeChange(row) {
                this.query.page = 1;
                this.query.row = row;
                this.queryData();
            },
            // 当前页码变化
            handleCurrentChange(page) {
                this.query.page = page;
                this.queryData();
            },
            // 删除公告
            del(obj) {
                const self = this;
                this.$confirm("确定要删除这条公告吗？", "提示").then(function () {
                    $.ajax({
                        url: "/notice/del",
                        data: { "id": obj.noticeId },
                        success: function (rs) {
                            if (rs.code == 200) {
                                self.queryData();
                            } else {
                                self.$alert(rs.msg);
                            }
                        }
                    });
                });
            },
            // 新增公告
            add() {
                const self = this;
                // 设置创建人
                this.parameter.noticeCreator = sessionStorage.getItem("name");

                $.ajax({
                    url: "/notice/add",
                    data: this.parameter,
                    success: function (rs) {
                        if (rs.code == 200) {
                            self.addShow = false;
                            self.queryData();
                        } else {
                            self.$alert(rs.msg);
                        }
                    }
                });
            },
            // 打开新增对话框
            addPage() {
                this.addShow = true;
            },
            // 修改公告
            update() {
                const self = this;
                $.ajax({
                    url: "/notice/update",
                    type: "post",
                    data: JSON.stringify(this.parameterUpdate),
                    contentType: "application/json",
                    success: function (rs) {
                        if (rs.code == 200) {
                            self.updateShow = false;
                            self.queryData();
                        } else {
                            self.$alert(rs.msg);
                        }
                    }
                });
            },
            // 打开修改对话框
            updatePage(obj) {
                this.parameterUpdate = obj;
                this.updateShow = true;
            },
            // 查询公告
            queryData() {
                const self = this;
                $.ajax({
                    url: "/notice/query",
                    data: this.query,

                    success: function (rs) {
                        console.log(rs);
                        if (rs.code == 200) {
                            self.list = rs.data.list;
                            self.total = rs.data.total;
                        } else {
                            self.$message(rs.msg);
                            self.list = [];
                        }
                    }
                });
            }
        },
        mounted() {
            // 页面加载时查询数据
            this.queryData();
            // 获取用户角色
            this.role = sessionStorage.getItem("role");
            console.log("当前用户角色：" + this.role);
        }
    });
</script>
</body>
</html>
